<template>
  <div class="ui-upload">
    <template v-if="type === 'custom'">
      <ui-upload-core
        ref="upload"
        v-model="innerValue"
        :editable="editable"
        :disabled="innerDisabled"
        :accept="accept"
        :limit-count="limitCount"
        :limit-size="limitSize"
        :auto-upload="autoUpload"
        :upload-method="uploadMethod"
        @upload-success="handleUploadSuccess"
        @file-list-change="handleFileListChange"
      >
        <template slot-scope="scope">
          <slot v-bind="scope" />
        </template>
      </ui-upload-core>
    </template>
    <template v-if="type === 'list'">
      <div class="ui-upload__handle">
        <ui-upload-core
          ref="upload"
          v-model="innerValue"
          :accept="accept"
          :editable="editable"
          :disabled="innerDisabled"
          :multiple="multiple"
          :limit-count="limitCount"
          :limit-size="limitSize"
          :auto-upload="autoUpload"
          :upload-method="uploadMethod"
          @file-list-change="handleFileListChange"
          @upload-success="handleUploadSuccess"
        >
          <template slot-scope="scope">
            <slot name="handle" v-bind="scope">
              <ui-button
                size="small"
              >选择文件</ui-button>
            </slot>
          </template>
        </ui-upload-core>
      </div>
      <div
        v-if="fileList && fileList.length"
        class="ui-upload__main"
      >
        <ui-file-list
          display-type="list"
          :editable="editable"
          :data="fileList"
          :show-status="autoUpload"
          @remove-file="handleRemoveFile"
        />
      </div>
    </template>
    <template v-if="type === 'card'">
      <ui-file-list
        display-type="card"
        :data="fileList"
        :editable="editable"
        :disabled="innerDisabled"
        :show-status="autoUpload"
        @remove-file="handleRemoveFile"
      >
        <template slot="append">
          <ui-upload-core
            v-show="!innerDisabled"
            ref="upload"
            v-model="innerValue"
            :accept="accept"
            :editable="editable"
            :multiple="multiple"
            :limit-count="limitCount"
            :limit-size="limitSize"
            :auto-upload="autoUpload"
            :upload-method="uploadMethod"
            @file-list-change="handleFileListChange"
            @upload-success="handleUploadSuccess"
          >

            <template slot-scope="scope">
              <slot name="handle" v-bind="scope">
                <div
                  class="ui-upload__plus"
                >
                  <span class="ui-upload__plus-icon" />
                  <span class="ui-upload__plus-text">选择文件</span>
                </div>
              </slot>
            </template>
          </ui-upload-core>
        </template>
      </ui-file-list>
    </template>
  </div>
</template>
<script>
import UiButton from '../button'
import UiUploadCore from './upload-core'
import UiFileList from '../file-list'
import MessageBox from '../message-box'

export default {
  name: 'UiUpload',
  components: {
    UiButton,
    UiUploadCore,
    UiFileList
  },
  props: {
    type: {
      type: String,
      default: 'custom',
      validator(value) {
        return ['custom', 'card', 'list'].includes(value)
      }
    },
    editable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean
    },
    value: {
      type: [Array, String, File],
      default: undefined
    },
    accept: {
      type: String,
      default: undefined
    },
    autoUpload: {
      type: Boolean,
      default: true
    },
    uploadMethod: {
      type: Function
    },
    multiple: {
      type: Boolean,
      default: false
    },
    limitCount: {
      type: Number,
      default: undefined
    },
    limitSize: {
      type: Number,
      default: undefined
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    innerDisabled() {
      if (this.disabled) {
        return true
      }
      if (this.limitCount) {
        if (this.fileList.length >= this.limitCount) {
          return true
        }
      }
      return false
    }
  },
  methods: {
    handleFileListChange({ fileList }) {
      this.fileList = fileList
    },
    handleUploadSuccess(evt) {
      this.$emit('upload-success', evt)
    },
    handleRemoveFile({ file }) {
      MessageBox.confirm('确定删除此文件吗？').then(() => {
        this.$refs.upload.removeFile(file.id)
      })
    }
  }
}
</script>
<style lang="less">
.ui-upload__main{
  margin-top: 12px;
}
.ui-upload__plus{
  width: 96px;
  height: 96px;
  border: 1px dashed #ddd;
  background-color: #f8f8f9;
  box-sizing: border-box;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  line-height: 1em;
  font-size: 14px;
  transition: all .25s;
  cursor: pointer;
  &:hover {
    border-color: #c6e2ff;
    background-color: #ecf5ff;
    color: #3385FF;
    .ui-upload__plus-icon{
      &:after, &:before {
        background-color: #3385FF;
      }
    }
  }
}
.ui-upload__plus-icon{
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  margin-bottom: 6px;
  &:after,&:before{
    content: '';
    background-color: #999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &:after {
    width: 1px;
    height: 20px;
  }
  &:before {
    width: 20px;
    height: 1px;
  }
}
</style>
